<template>
  <div class="content">
    <el-form :model="form" class="selectList" label-width="120px">
      <el-form-item label="选择路段">
        <el-select
          v-model="form.sectionCode"
          value-key="code"
          placeholder="请选择路段"
          @change="tunnelSelect(form.sectionCode)"
        >
          <el-option label="请选择路段" value></el-option>
          <el-option
            v-for="tunnelList in tunnelLists"
            :label="tunnelList.name"
            :value="tunnelList.code"
            :key="tunnelList.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择设备模块">
        <el-select
          v-model="form.categoryCode"
          placeholder="请选择设备模块"
          @change="equipmentClassSelect(form.categoryCode)"
        >
          <el-option label="请选择设备模块" value></el-option>
          <el-option
            v-for="equipmentClass in equipmentClassLists"
            :label="equipmentClass.name"
            :value="equipmentClass.code"
            :key="equipmentClass.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字查询">
        <div style="display: flex;">
          <div style="flex: 1;">
            <el-input class="indexInput" v-model="form.key" placeholder="请输入关键字"></el-input>
            <el-button class="inquireBtn" type="primary" @click="inquireClick()" plain>查询</el-button>
          </div>
          <div style="flex: 1;text-align: right;">
            <el-button type="primary" class="primaryButton" @click="addFunc()" plain>
              <i class="el-icon-plus"></i>
              添加设备
            </el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="equipmentLists" stripe style="width: 100%;">
      <el-table-column prop="categoryCode" width="80">
        <template slot-scope="scope">
          <img
            v-if="scope.row.categoryCode.indexOf('CDZSQ') != -1"
            :src="'static/img/mapIcon/'+scope.row.categoryCode+'-3.png'"
            width="50"
            height="25"
          />
          <img
            v-if="scope.row.categoryCode == 'JTXHD'"
            :src="'static/img/mapIcon/'+scope.row.categoryCode+'-3.png'"
            width="40"
            height="15"
          />
          <img
            v-if="scope.row.categoryCode != 'JTXHD' && scope.row.categoryCode.indexOf('CDZSQ') == -1"
            :src="'static/img/mapIcon/'+scope.row.categoryCode+'-3.png'"
            width="30"
            height="30"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="pileNo" label="桩号"></el-table-column>
      <el-table-column prop="equModules" label="所属模块"></el-table-column>
      <el-table-column prop="categoryId" label="设备分类"></el-table-column>
      <el-table-column prop="location" label="经度"></el-table-column>
      <el-table-column prop="location" label="纬度"></el-table-column>
      <el-table-column prop="isUp" label="方向"></el-table-column>
      <el-table-column prop="comment" label="备注"></el-table-column>
      <el-table-column prop label="操作">
        <template slot-scope="scope">
          <a class="add" style="cursor: pointer;" @click="detailFunc(scope.$index, scope.row)">查看</a>
          <i class="line"></i>
          <a class="reset" style="cursor: pointer;" @click="updateFunc(scope.$index, scope.row)">修改</a>
          <i class="line"></i>
          <a
            class="delete"
            style="cursor: pointer;"
            @click.stop="deleteFunc(scope.$index, scope.row)"
          >删除</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="block-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      :title="title"
      v-el-drag-dialog
      :visible.sync="centerDialogVisible"
      :append-to-body="false"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="30%"
        class="demo-ruleForm"
      >
        <el-form-item label="选择所属模块" prop="equModules">
          <el-select
            v-model="ruleForm.sectionCode"
            value-key="code"
            @change="tunnelChange()"
            placeholder="请选择隧道"
          >
            <el-option
              v-for="tunnelList in tunnelLists"
              :key="tunnelList.code"
              :label="tunnelList.name"
              :value="tunnelList.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择设备分类" prop="categoryMessage">
          <el-select
            v-model="ruleForm.categoryMessage"
            value-key="code"
            placeholder="请选择设备分类"
            @change="addEquipClassChange()"
          >
            <el-option
              v-for="equipmentClass in equipmentClassLists"
              :key="equipmentClass.code"
              :label="equipmentClass.name"
              :value="equipmentClass"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="ruleForm.longitude"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="ruleForm.latitude"></el-input>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-input v-model="ruleForm.direction"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input type="textarea" v-model="ruleForm.comment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel('ruleForm')">取 消</el-button>
          <el-button v-if="addOrUpdate == 1" type="primary" @click="addSave('ruleForm')">确 定</el-button>
          <el-button v-if="addOrUpdate == 2" type="primary" @click="updateSave('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import equipmentService from "../../../services/equipmentMode";
export default {
  name: "equipment-list",
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      total: 0,
      equipmentLists: [],
      tunnelLists: [],
      equipmentClassLists: [],
      centerDialogVisible: false,
      equipClassTemplateLists: [],
      dialogVisible: false,
      areaLists: [],
      file: "",
      title: "",
      addOrUpdate: 1,
      updateCode: "",
      equipmentCode: "",
      outerVisible: false,
      innerVisible: false,
      form: {
        sectionCode: "",
        categoryCode: "",
        key: ""
      },
      ruleForm: {
        sectionCode: "",
        categoryMessage: {},
        name: "",
        pileNo: "",
        code: "",
        additionalLists: {}
      },
      equForm: {
        equipmentClass: ""
      },
      rules: {
        sectionCode: [
          { required: true, message: "请选择隧道", trigger: "change" }
        ],
        categoryMessage: [
          { required: true, message: "请选择设备分类", trigger: "change" }
        ],
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        pileNo: [{ required: true, message: "请输入设备桩号", trigger: "blur" }]
      },
      data1: {}
    };
  },
  directives: {
    // elDragDialog
  },
  components: {
    // draggable
  },
  mounted() {
    this.list();
  },
  components: {
    // pointAndFault
  },
  methods: {
    imgBroadcastChange(file, fileList) {
      this.file = file.raw;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.list();
    },
    //设备列表
    list() {
      let listDate = {
        page: this.pageNo,
        count: this.pageSize,
        key: this.form.key
      };
      equipmentService.equipmentListService(listDate).then(res => {
        if (res.code == 1) {
          this.equipmentLists = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    //按设备分类查询
    equipmentClassSelect(val) {
      this.form.categoryCode = val;
      this.list();
    },
    // 点击查询
    inquireClick() {
      this.list();
    },
    // 添加设备
    addFunc() {
      this.addOrUpdate = 1;
      this.title = "添加设备";
      this.centerDialogVisible = true;
    },
    //添加保存
    addSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this;
          let addDate = {
            moId: 234,
            sectionId: 234,
            name: "设备1",
            isUp: 1,
            isRoadEquip: 1,
            pileNo: "k100",
            categoryId: 234,
            location: "经纬度",
            status: 3
          };
          equipmentService.equipmentAddService(addDate).then(res => {
            if (res.code == 1) {
              this.$message({
                type: "success",
                message: "添加设备成功!"
              });
              this.list();
            } else {
              this.$message({
                type: "error",
                message: "添加设备失败!"
              });
              this.centerDialogVisible = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改点击
    updateFunc(index, val) {
      this.updateCode = val.code;
      this.addOrUpdate = 2;
      this.title = "修改设备";
      this.centerDialogVisible = true;
      let updateDate = {
        id: val.data.records.id
      };
      equipmentService.equipmentUpdateService(updateDate).then(res => {
        if (res.code == 1) {
        }
      });
    },
    //修改保存
    updateSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let uodateSaveDate = {};
          equipmentService
            .equipmentUpdateSaveService(uodateSaveDate)
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  type: "success",
                  message: "修改设备成功!"
                });
                this.$refs[formName].resetFields();
                this.list();
              } else {
                this.$message({
                  type: "error",
                  message: "修改设备失败!"
                });
              }
              this.centerDialogVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancel(formName) {
      this.centerDialogVisible = false;
      this.$refs[formName].resetFields();
    },

    //删除设备
    deleteFunc(index, val) {
      this.$confirm("此操作将删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          let deleteDate = {
            ids: val.data.records.id
          };
          equipmentService.equipmentDeleteService(deleteDate).then(res => {
            if (res.code == 1) {
              this.list();
            } else {
              this.$message({
                message: res.err_message,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.content {
  background-color: #ffffff;
}
.reset {
  color: #1890ff;
}
.delete {
  color: #f5222d;
}
.line {
  display: inline-block;
  width: 1px;
  background: rgba(0, 0, 0, 0.09);
  margin: 0 11px;
  height: 14px;
}
.block {
  margin-top: 20px;
  text-align: center;
}
.indexInput {
  width: 180px;
}
.inquireBtn {
  margin-left: 20px;
}
.block-page {
  text-align: center;
  margin-top: 15px;
}
</style>
